<template>
  <div class="view-container home">

   <div class="divNO1">

     <div class="A1">


       <div>

         <el-tabs v-model="activeName">

           <el-tab-pane label="工作交流" name="first">
             <el-row class="rownoA1">
               <el-col :span="11"><el-button @click="all" type="primary" icon="el-icon-s-management" ></el-button></el-col>
               <el-col :span="11"><el-button @click="geren" type="success" icon="el-icon-user" ></el-button></el-col>
             </el-row>
             <el-row class="rownoA2">
               <el-col :span="11">全部共享</el-col>
               <el-col :span="11">个人信息</el-col>
             </el-row>

             <el-row class="rownoA1">
               <el-col :span="11"><el-button @click="siren" type="warning" icon="el-icon-user-solid" ></el-button></el-col>
               <el-col :span="11"><el-button @click="keshi" type="danger" icon="el-icon-s-platform" ></el-button></el-col>
             </el-row>
             <el-row class="rownoA2">
               <el-col :span="11">私人信息</el-col>
               <el-col :span="11">科室信息</el-col>
             </el-row>
             <el-row class="rownoA1">
               <el-col :span="11"><el-button @click="detail" type="info" icon="el-icon-search" ></el-button></el-col>
               <el-col :span="11"><el-button @click="huizong" type="warning" icon="el-icon-s-opportunity" ></el-button></el-col>
             </el-row>
             <el-row class="rownoA2">
               <el-col :span="11">信息查看</el-col>
               <el-col :span="11">汇总查看</el-col>
             </el-row>
           </el-tab-pane>



         </el-tabs>

       </div>



       <el-carousel :interval="5000" arrow="always">
         <el-carousel-item v-for="img in imgs">
           <img v-if="img.id%2!=0" :src="img.src" alt="" style="width: 100%;height: 200px;">
           <img v-else :src="img.src" alt="">
         </el-carousel-item>
       </el-carousel>
     </div>
     <div class="A2">
       <div>

         <el-table
           :data="user"
           style="width: 100%"
           @row-click="dianID"
           >
           <el-table-column
             label="类别"
             width="120">
             <template slot-scope="scope">{{ scope.row.infoType }}</template>
           </el-table-column>

           <el-table-column
             label="标题"
           >
             <template slot-scope="scope"><el-link>{{ scope.row.infoTitle }}</el-link></template>
           </el-table-column>
         </el-table>


       </div>
       <div>
         <el-calendar v-model="value">
         </el-calendar>
       </div>


       <div>

<!--         <el-card class="box-card">-->
<!--           <div slot="header" class="clearfix">-->
<!--             <span>代办事项</span>-->
<!--&lt;!&ndash;             <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>&ndash;&gt;-->
<!--           </div>-->
<!--           <div v-for="o in user" :key="o" class="text item">-->
<!--             {{'列表内容 ' + o.infotype }}-->
<!--           </div>-->
<!--         </el-card>-->

       </div>



     </div>




   </div>

    <div class="divNO2">
      <div>
              <tianqi class="tianqi"/>
      </div>
      <div>

<!--        <el-card class="box-card">-->
<!--          <div slot="header" class="clearfix">-->
<!--            <span>待阅事项</span>-->
<!--            &lt;!&ndash;             <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>&ndash;&gt;-->
<!--          </div>-->
<!--          <div v-for="o in user" :key="o" class="text item">-->
<!--            {{'列表内容 ' + o }}-->
<!--          </div>-->
<!--        </el-card>-->
      </div>

    </div>

  </div>
</template>

<script>
  import tianqi from "@/components/tianqi/tianqi"
  import wenhuaxuanchuanapi from "@/api/menhu/wenhuaxuanchuan"
  import listMixin from '@/mixin/listMixin'

export default {

  name: 'Home',
  components:{
    tianqi
  },
  created() {
    this.getalist()
  },
  data() {

    return {
      id:"",//查询ID
      mixins:[listMixin],

      user:{},
      activeName: 'first',
      imgs: [
        { id: 1, src: require('@/assets/carousel/banner1.png') },
        { id: 2, src: require('@/assets/carousel/banner2.jpg') },
        { id: 3, src: require('@/assets/carousel/banner1.png') },
        { id: 4, src: require('@/assets/carousel/banner2.jpg') }
      ],
      interval: 5000,
      value:new Date()
    }
  },
  methods: {

    //获取ID
    dianID(row){
      this.id = row.infoId
      console.log(this.id)
      this.xiangqingall()
    },
    //文化宣传
    getalist(){
      wenhuaxuanchuanapi.getList().then(res=>{

        this.user = res.records
        console.log(this.user)
      })
    },

    xiangqingall(){
      this.$router.push('/portal/homeAll')
      this.$router.id = this.id
    },

    //跳转全部共享
    all(){
      this.$router.push('/work-exchange/all')

    },

    //跳转个人消息
    geren(){
      this.$router.push('/work-exchange/geren')
    },

    //跳转私人消息
    siren(){
      this.$router.push('/work-exchange/siren')
    },

    //跳转科室消息
    keshi(){
      this.$router.push('/work-exchange/keshi')
    },


    //跳转消息查看
    detail(){
      this.$router.push('/work-exchange/info-detail')
    },

    // el-icon-user
    //跳转汇总查看
    huizong(){
      this.$router.push('/work-exchange/huizong')
    },


  }
}
</script>

<style>

  .el-card{
    height: 100%;
  }
  .el-tabs{
    padding-left: 10px;
  }

  .rownoA2{
    text-align: center;
    font-size: 12px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 20px;
  }
  .rownoA1{
    text-align: center;
    margin-left: 20px;
  }
   .A1>.el-icon-s-management,.el-icon-user,.el-icon-user-solid,.el-icon-s-platform,.el-icon-search,.el-icon-s-opportunity{
      font-size: 40px;
    }
  .A1 .el-icon-check{
      font-size: 40px;
    }
  .A1  .el-icon-message{
      font-size: 30px;
    }


  .el-calendar-table .el-calendar-day{
    height: 50px;
  }
</style>

<style scoped lang="scss">

  .A1{
    height: 300px;
    margin: 10px;
    display: flex;


    >div:nth-child(1){

      height: 100%;
      margin: 0;
      width: 20%;
      margin-right: 10px;
      background-color: white;
    }

    >div:nth-child(2){

      height: 100%;
      margin: 0;
      width: 80%;
      .el-carousel{
        width: 100%;
      }
    }
  }

  .A2{

    height: 490px;
    margin: 10px;
    display: flex;
    >div:nth-child(1){
      background-color: white;

      height: 100%;
      margin: 0;
      width: 50%;
      margin-right: 10px;
    }
    >div:nth-child(2){
      background-color: white;

      height: 100%;
      margin: 0;
      width: 30%;
      margin-right: 10px;
    }
    >div:nth-child(3){
      background-color: white;

      height: 100%;
      margin: 0;
      width: 20%;

    }
  }
  .A3{
    display: flex;
    height: 350px;

    margin: 10px;
    >div:nth-child(1){

      background-color: white;
      height: 100%;
      margin: 0;
      width: 40%;
      margin-right: 10px;
    }
    >div:nth-child(2){

      background-color: white;
      height: 100%;
      margin: 0;
      width: 30%;
      margin-right: 10px;
    }
    >div:nth-child(3){

      background-color: white;
      height: 100%;
      margin: 0;
      width: 30%;
    }
  }

  .view-container{
   display: flex;
  }
  .view-container .divNO1{


    width: 85%;

  }


  .view-container .divNO2{
    width: 15%;

    padding-left: 10px;
    div:nth-child(1){

      margin-top: -4px;
      height: 380px;


    }
    div:nth-child(2){
      margin-top: 60px;
      height: 380px;
      background-color: white;
    }
  }



  .tianqi{

    padding: 0;
  }

  .view-container {
    background-color: #F2F2F2;
  }

  section {
    display: flex;
    justify-content: space-evenly;
    padding: 0;

    &>div {
      width: 100%;
      background-color: white;
      position: relative;
    }

    &>div:first-of-type {
      margin-right: 20px;
    }
  }

  .block-header {
    height: 40px;
    padding-left: 20px;
    line-height: 40px;
    border-bottom: 1px solid #e6e6e6;

    .tag {
      position: absolute;
      left:0;
      top:0;
      background-color: #008B7B;
      width: 5px;
      height: 40px;
    }
  }

  .block-section {
    padding: 15px;
  }



  .blocl{
    width: 50%;
    margin: 10px;
  }

</style>

